import { NavLink, Route, Switch, Redirect } from 'react-router-dom'
import RankingList from '../RankingList'

export default function Ranking (props) {
  return (
    <div>
      <nav className='nav'>
        <NavLink className='nav-link active' to='/findmusic/ranking/bsb'>
          飙升榜
        </NavLink>
        {/* 如果不以 / 开头，会在上级路由基础上进行拼接 */}
        <NavLink className='nav-link' to='xgb'>
          新歌榜
        </NavLink>
        <NavLink className='nav-link' to='/findmusic/ranking/ycb'>
          原创榜
        </NavLink>
      </nav>

      <div className='alert alert-light' role='alert'>
        <Switch>
          {/* 默认显示飙歌榜 */}
          <Redirect from='/findmusic/ranking' exact to='/findmusic/ranking/bsb'></Redirect>
          <Route path='/findmusic/ranking/:id' component={RankingList} />
        </Switch>
      </div>
    </div >
  )
}